<template>
    <div class="yuan-container generalDetailAgencyList" style="border:solid 1px #eee;padding:10px;border-radius:8px">
        <div class="filter-panel" style="margin-bottom:10px;text-align:right" v-if="!isShow">
            <a-button type="primary" @click="add">添加活动机构</a-button>
        </div>
        <a-table bordered :rowKey="(item,i)=>item.storeId" :columns="columns" :data-source="pageList" :pagination="false">
            <template slot='action' slot-scope="text, record, index">
                <div>
                    <a-button type="danger" @click="clickDelete(record,index)" v-if="!isShow">删除</a-button>
                </div>
            </template>
            <template slot='getRow' slot-scope="text, record, index">
                <div>
                    <a-select v-model="record.couponSel" @change="resetList" allowClear placeholder="请选择活动卡券">
                        <a-select-option :value="item.id" v-for="item in record.couponList" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </div>
            </template>
            <template slot='participationStatus' slot-scope="text, record, index">
                <div>
                    <span class="c-success" v-if="record.participationStatus===1">已同意</span>
                    <span class="c-danger" v-else-if="record.participationStatus===2">已拒绝:{{record.refuseCause}}</span>
                    <span class="c-primary" v-else>待确认</span>
                </div>
            </template>
        </a-table>
        <a-modal width="1000px" title="选择机构" :visible="agencyListVisible" @cancel="agencyListVisible=false"
            class="yuan-container">
            <a-spin tip="Loading..." :spinning="agencyListLoading">
                <div class="filter-panel">
                    <div class="filter-list">
                        <span>机构名称：</span>
                        <a-input-search allowClear v-model="agencyPageParams.name" placeholder="机构名称" @search="resetAgencyList" />
                    </div>
                    <div class="filter-list">
                        <span>创建时间：</span>
                        <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']"
                            :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                    </div>

                </div>
                <a-table bordered :rowKey="(item,i)=>item.id" :columns="agencyColumns" :data-source="agencyList"
                    :pagination="agencyPagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="clickAdd(record)"
                                v-if="!pageList.find(one=>one.storeId===record.id)">选择</a-button>
                            <a-button type="warning" @click="clickAdd(record)" v-else>已选择</a-button>

                        </div>
                    </template>

                </a-table>
            </a-spin>
            <template slot="footer">
                <a-button @click="agencyListVisible=false">关闭</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
import marketApi from "@/api/marketApi";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: () => [] }) defaltData!: any;
    @Prop({ default: false }) isShow!: boolean;

    @Watch("defaltData")
    defaltDataChange() {
        if (this.defaltData) {
            this.pageList = this.defaltData.map((item) => ({ ...item }));
        }else{
            this.pageList=[]
        }
    }
    columns = [
        {
            align: "center",
            dataIndex: "storeName",
            key: "storeName",
            title: "机构名称",
        },
        {
            align: "center",
            dataIndex: "name2",
            key: "name2",
            title: "参与活动的卡券",
            width:250,
            scopedSlots: { customRender: "getRow" },
        },
        {
            align: "center",
            dataIndex: "participationStatus",
            key: "participationStatus",
            title: "确认状态",
            width:250,
            scopedSlots: { customRender: "participationStatus" },
        },
    ];
    agencyColumns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "机构名称",
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            scopedSlots: { customRender: "action" },
        },
    ];
    pageList: any[] = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    async mounted() {
        console.info(this.defaltData)
        if (this.defaltData) {
            this.pageList = this.defaltData.map((item) => ({ ...item }));
        }
        if (!this.isShow) {
            this.columns.push({
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                width:250,
                scopedSlots: { customRender: "action" },
            });
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    agencyList = [];
    async getList() {}
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }

    agencyListVisible = false;
    agencyListLoading = false;
    async add() {
        this.agencyListVisible = true;
        if (this.agencyList.length === 0) {
            await this.getAgencyList();
        }
    }

    agencyPagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.agencyPageChange,
    };
    agencyPageParams: any = {};
    agencyPageChange(page: number, pageSize: number) {
        this.agencyPagination.pageSize = pageSize;
        this.agencyPagination.current = page;
        this.getAgencyList();
    }
    async getAgencyList() {
        this.agencyList = [];
        this.agencyListLoading = true;
        try {
            const res = await marketApi.findAllStore({
                ...this.agencyPageParams,
                pageSize: this.agencyPagination.pageSize,
                pageNum: this.agencyPagination.current,

            });
            this.agencyList = res.data?.rows || [];
            this.agencyPagination.total = res.data?.total || 0;
        } finally {
            this.agencyListLoading = false;
        }
    }
    resetAgencyList() {
        this.agencyPagination.current = 1;
        this.getAgencyList();
    }
    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.agencyPageParams.createStartTime = arr[0] + " 00:00:01";
        this.agencyPageParams.createEndTime = arr[1] + " 23:59:59";
        this.resetList();
    }

    async clickAdd(item) {
        const find = this.pageList.find((findPage) => {
            return findPage.storeId === item.id;
        });
        if (find) {
            this.$message.warning("该门店已经添加");
            return;
        }
        this.agencyListLoading = true;
        // 获取优惠券列表
        const res = await marketApi.findCouponListByOrganizationId({
            pageSize: 1000,
            pageNum: 1,
            organizationId: item.id,
            status: 4,
            type: "专属券",
        });
        this.pageList.push({
            storeName: item.name,
            storeId: item.id,
            storeType: item.storeType,
            couponList: res.data,
            couponSel: undefined,
        });
        this.agencyListLoading = false;
    }
    clickDelete(item, idx) {
        this.pageList.splice(idx, 1);
    }
    getPageData() {
        return this.pageList;
    }
}
</script>
